<template>
  <div>
    <!--顶部工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="数据字典名" clearable style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.sn" placeholder="编号" clearable style="width: 130px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="init">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--  展示数据的表格  -->
    <el-table :data="listData" @row-dblclick="drawer" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="160">
      </el-table-column>
      <el-table-column prop="name" label="数据字典名" width="300" >
      </el-table-column>
      <el-table-column prop="sn" label="编号" width="300" >
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--保存界面-->
    <el-dialog :title="saveTitle" :visible.sync="formVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="100px" :rules="formRules" ref="saveForm">
        <el-form-item label="数据字典名" prop="name">
          <el-input v-model="saveForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="编号" prop="sn">
          <el-input v-model="saveForm.sn" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="listLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--底部工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <!--   分页查询   -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" style="float:right">
      </el-pagination>
    </el-col>

    <!--  抽屉  -->
    <el-drawer
        title="字典明细"
        :visible.sync="table"
        size="35%">
      <el-button type=“primary” @click="dadd">新增</el-button>
      <el-table :data="gridData" highlight-current-row style="width: 100%;">
        <el-table-column type="index" :index="1" width="110" label="编号"></el-table-column>
        <el-table-column property="name" label="明细名" width="200"></el-table-column>
        <el-table-column width="150" label="操作">
          <template scope="scope">
            <el-button size="small" @click="dhandleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="dhandleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="dhandleSizeChange"
          @current-change="dhandleCurrentChange"
          :current-page="dcurrentPage"
          :page-sizes="pageSizes"
          :page-size="dpageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dtotal" style="float:right">
      </el-pagination>
    </el-drawer>

  <!--  抽屉表单  -->
    <el-dialog :title="dsaveTitle" :visible.sync="dformVisible" :close-on-click-modal="false">
      <el-form :model="dsaveForm" label-width="100px" :rules="dformRules" ref="dsaveForm">
        <el-form-item label="明细名" prop="name">
          <el-input v-model="dsaveForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dformVisible = false">取消</el-button>
        <el-button type="primary" @click.native="dsaveSubmit" :loading="dlistLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      table:false,//抽屉
      gridData:[],//抽屉数据
      dtitle:'',//抽屉名称
      dTypeId:0,//存放types_id
      listLoading:false,//忙等
      dlistLoading:false,
      listData:[],  //装列表数据
      sels:[],      //批量删除使用
      //高级查询使用的
      filters: {
        sn:'',
        name: ''
      },
      //分页需要用的数据
      total:0, //数据的总条数
      currentPage:1, //当前页
      pageSizes:[5, 10, 15, 20],//分页步长
      pageSize:10,        //当前页条数

      //抽屉分页
      dpageSize:5,
      dcurrentPage:1,
      dpageSizes:[5, 10, 15, 20],
      dtotal:0,

      //对话框中的数据
      saveForm: {
        id: null,
        name: '',
        sn: '',
      },
      formVisible : false,//是否显示对话框

      saveTitle : "",//对话框标题
      //required:是否为必填项
      //trigger: 'blur' 失去焦点就验证
      formRules: {
        name: [{ required: true, message: '请输入数据字典名', trigger: 'blur' }],
        sn : [{ required: true, message: '请输入编号', trigger: 'blur' }]
      },

      //抽屉的对话框
      dformVisible : false,
      dsaveForm: {
        id: null,
        name: '',
        types_id : ''
      },
      dsaveTitle : "",//对话框标题
      dformRules: {
        name: [{ required: true, message: '请输入数据字典名', trigger: 'blur' }],
        sn : [{ required: true, message: '请输入编号', trigger: 'blur' }]
      },
    }
  },
  methods:{
    //请求抽屉数据
    loadDrawer(id){
        let para = {
          currentPage : this.dcurrentPage,
          pageSize : this.dpageSize,
          pid : id,
        }
      this.$http.post("/ddetail/",para).then(res=>{
        this.gridData = res.data.data
        this.dtotal = res.data.total
      })
    },
    //双击打开抽屉
    drawer(row){
      this.table = true
      this.dTypeId = row.id
      this.loadDrawer(this.dTypeId)
    },
    //打开编辑抽屉
    dhandleEdit(row){
      if(this.$refs['dsaveForm']){
        this.$refs['dsaveForm'].resetFields();//重置表单验证
      }
      this.dformVisible = true
      this.dsaveTitle = "修改明细"
      this.dsaveForm = Object.assign({},row)
    },
    //抽屉新增按钮
    dadd(){
      if(this.$refs['dsaveForm']){
        this.$refs['dsaveForm'].resetFields();//重置表单验证
      }
      this.dsaveTitle = "新增明细"
      this.dsaveForm = {
        id: null,
        name: '',
      }
      this.dformVisible = true
    },
    //抽屉的保存
    dsaveSubmit(){
      this.$refs.dsaveForm.validate((valid) => { //数据验证 结果为true或false
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.dlistLoading = true;
            this.dsaveForm.types_id = this.dTypeId
            let para = Object.assign({}, this.dsaveForm);
            this.$http.put("/ddetail",para).then(res=>{
              if(res.data.success) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.loadDrawer(this.dTypeId)
                this.dformVisible = false;
                this.dlistLoading = false;
              }else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
                this.dlistLoading = false;
              }
            })
          });
        }
      });
    },
    //抽屉的删除
    dhandleDel(row){
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => { //确定
        this.dlistLoading = true;
        this.$http.delete("/ddetail/"+row.id).then(res=>{
          this.listLoading = false;
          if(res.data.success){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.dcurrentPage = 1  //删除后回到第一页
            this.dlistLoading = false;
            this.loadDrawer(this.dTypeId)
          }else {
            //删除失败 提示信息
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
            this.dlistLoading = false;
          }
        })
      })
    },
    dhandleSizeChange(val){
      this.dpageSize = val
      this.loadDrawer(this.dTypeId)
    },
    dhandleCurrentChange(val){
      this.dcurrentPage = val
      this.loadDrawer(this.dTypeId)
    },

    //给数据前面的选择按钮添加事件
    selsChange(val){
      this.sels = val
    },
    //高级查询跳转第一页
    init(){
      this.currentPage = 1
      this.loadListData()
    },
    //远程请求列表数据
    loadListData(){
      let para = {
        currentPage : this.currentPage,
        pageSize : this.pageSize,
        sn : this.filters.sn,
        name : this.filters.name
      };
      this.listLoading = true;
      this.$http.post("/dtype",para).then(res=>{
        this.listData = res.data.data;
        this.total = res.data.total;
        this.listLoading = false;
      })
    },
    //当前页发生变化触发的方法
    handleCurrentChange(val){
      this.currentPage = val
      this.loadListData()
    },
    //分页步长发生变化触发的方法
    handleSizeChange(val) {
      this.pageSize = val
      this.loadListData()
    },
    //批量删除
    batchRemove(){
      this.$confirm('确认删除选中的记录吗?', '提示', {
        type: 'warning'
      }).then(() => { //确定
        this.listLoading = true;
        let ids = this.sels.map(item => item.id);//将数组中的每一个对象的id取出来，放入新数组
        this.$http.patch("/dtype",ids).then(res=>{
          this.listLoading = false;
          if(res.data.success){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.loadListData()
          }else {
            //删除失败 提示信息
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {  //取消

      });
    },
    //编辑
    handleEdit(row){
      if(this.$refs['saveForm']){
        this.$refs['saveForm'].resetFields();//重置表单验证
      }
      this.formVisible = true
      this.saveTitle = "编辑数据字典"
      this.saveForm = Object.assign({},row)
    },
    //删除
    handleDel(row){
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => { //确定
        this.listLoading = true;
        this.$http.delete("/dtype/"+row.id).then(res=>{
          this.listLoading = false;
          if(res.data.success){
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.currentPage = 1  //删除后回到第一页
            this.loadListData()
          }else {
            //删除失败 提示信息
            this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {  //取消

      });
    },
    //添加
    add(row){
      if(this.$refs['saveForm']){
        this.$refs['saveForm'].resetFields();//重置表单验证
      }
      this.saveTitle = "新增数据字典"
      this.saveForm = {
        id: null,
        name: '',
        sn: '',
      }
      this.formVisible = true
    },
    //保存方法
    saveSubmit(){
      this.$refs.saveForm.validate((valid) => { //数据验证 结果为true或false
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.listLoading = true;
            let para = Object.assign({}, this.saveForm);
            console.log(para)
            this.$http.put("/dtype",para).then(res=>{
              if(res.data.success) {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.loadListData()
                this.formVisible = false;
                this.listLoading = false;
              }else {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
                this.listLoading = false;
              }
            })
          });
        }
      });
    },
  },

  mounted(){
    //页面加载完毕以后立即执行此方法
    this.loadListData();
  }
}
</script>

<style scoped>
</style>